<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta http-equiv="pragma" content="no-cache">
		<meta http-equiv="expires" content="0">
		<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
		<link rel="shortcut icon" href="../../img/icon/bitbug_favicon.ico">
		<link rel="stylesheet" href="../../css/mui/mui.min.css" />
		<title>个人资料</title>
		<style>
			html,
			body {
				background: #FFFFFF !important;
			}
			
			.mui_aetd {
				width: 100%;
				height: 50px;
				background: #FFFFFF;
				position: fixed;
				top: 0px;
				z-index: 888;
				border-bottom: 1px solid #cecece;
			}
			
			.aeta_b {
				width: 100%;
				height: 100%;
				float: left;
			}
			
			.aeta_b img {
				width: 10px;
				height: 15px;
				display: block;
				margin-top: 0.44rem;
				float: left;
				margin-top: 17.5px;
			}
			
			.qy_detas {
				text-align: center;
				color: #000000;
				font-size: 1.2rem;
				line-height: 50px
			}
			
			.el_img {
				width: 100%;
				height: 80px;
				margin-top: 50px;
			}
			
			.el_img .us_font {
				font-size: 1.1rem;
				color: #444444;
				line-height: 80px;
				margin-left: 5%;
				float: left;
			}
			
			.el_img img {
				width: 53px;
				height: 53px;
				border-radius: 100%;
				float: right;
				margin-top: 13.5px;
				margin-right: 5%;
				position: relative;
			}
			
			.el_img #photo_in {
				width: 53px;
				height: 53px;
				position: absolute;
				opacity: 0;
				-ms-filter: 'alpha(opacity=0)';
				right: 5%;
				top: 13.5px;
				z-index: 999;
			}
			
			.bk_bgk {
				width: 100%;
				height: 10.5px;
				background: #F2F2F2;
			}
			
			.el_item {
				width: 90%;
				height: 51px;
				margin: 0 auto;
				line-height: 51px;
				border-bottom: 1px solid #CECECE;
				color: #444444;
			}
			
			.el_item input {
				width: 60%;
				height: 30px;
				padding: 0px;
				border: 0px;
			}
			
			.el_item .item_i {
				float: left;
			}
			
			.el_item .mui-left {
				float: left;
				width: 30%;
			}
			
			.us_btn {
				width: 90%;
				height: 50px;
				background: #3CAFFF;
				color: #FFFFFF;
				line-height: 50px;
				text-align: center;
				margin: 0 auto;
				border-radius: 8px;
				margin-top: 120px;
			}
		</style>
	</head>

	<body>
		<div class="mui_aetd" id="mui_aetd">
			<div class="aeta_b">
				<a href="personal.html" class="mui-icon mui-icon-left-nav mui-pull-left" style="color: #6D6D72;margin-left: 2%;font-size: 2rem;line-height: 3rem;"></a>
				<div class="qy_detas">个人资料</div>
			</div>
		</div>
		<div class="el_img">
			<div class="us_font">修改头像</div>
			<img id="userurl" name="userUrl" src="../../img/personal/us_elim2.png">
			<input type="file" id="photo_in" name="" onchange="start_upload(this)" />
		</div>
		<div class="bk_bgk"></div>
		<div class="el_item">
			<div class="item_i">昵称：</div>
			<input type="text" id="username" name="userName" />
		</div>
		<div class="el_item">
			<div class="item_i">性别：</div>
			<div class="mui-radio mui-left">
				<label>男</label>
				<input name="radioname" type="radio" value="1" id="male">
			</div>
			<div class="mui-radio mui-left">
				<label>女</label>
				<input name="radioname" type="radio" value="2" id="girl">
			</div>
		</div>
		<div class="us_btn" onclick="updateMaterial()">确定</div>

		<div style="position: fixed;display:table;margin: 0 auto;width: 0px;height: 0px;top: 40%;left: 50%;right: 50%;z-index: 30000;">
			<div id="myspin"></div>
		</div>
	</body>
	
	<script type="text/javascript" src="../../js/mui/mui.min.js" ></script>
	<script type="text/javascript" src="../../js/jquery/jquery-2.1.4.min.js" ></script>
	<script type="text/javascript" src="../../js/spin/spin.min.js" ></script>
	<script type="text/javascript" src="../../js/base64_img.js" ></script>
 	<script type="text/javascript" src="../../js/common.js" ></script>
 	<script type="text/javascript" src="js/personal_update.js" ></script>
 	<script type="text/javascript" src="../../js/util/util.js"></script>
	<script>
		if(isiOS) {
			$(".mui_aetd").css("display", "none");
			$(".el_img").css("margin-top", "0px");
		}
		if(isAndroid) {
			$("#photo_in").css({
				"width": "53px",
				"height": "53px",
				"position": "absolute",
				"opacity": "0",
				"-ms-filter": "alpha(opacity=0)",
				"right": "5%",
				"top": "63.5px",
				"z-index": "999"
			})
		}
	</script>

</html>